<template>
    <div class="game-container" :class="{ 'logged-in': walletStore.isConnected }">
      <!-- 背景效果 -->
      <div class="background-overlay"></div>
      
      <!-- 登录界面 -->
      <div v-if="!walletStore.isConnected" class="login-container">
        <div class="login-card">
          <div class="logo">
            <el-image :src="logo" alt="游戏Logo" class="logo-img" fit="contain"/>
            <h1 class="game-title">数字宝藏猎人</h1>
          </div>
          
          <p class="slogan">探索区块链世界，寻找隐藏的宝藏</p>
          
          <el-button 
            type="primary" 
            class="connect-btn" 
            :loading="walletStore.connecting" 
            @click="walletStore.connectWallet"
            :disabled="!isMetaMaskInstalled"
          >
            <i class="metamask-icon"></i> 
            {{ isMetaMaskInstalled ? '连接 MetaMask 钱包' : '请先安装 MetaMask' }}
          </el-button>
          
          
          
          <div class="footer-info">
            <p>区块链探险，宝藏等你来发现</p>
            <p>© 2025 数字宝藏猎人</p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
<script setup>
import { ref, onMounted, watch, nextTick } from 'vue'
import { useWalletStore } from '../stores/walletStore'
import "../styles/HomeView.css"
import { useRouter } from 'vue-router'
import logo from '../assets/logo.jpeg'
// 状态变量
const walletStore = useWalletStore()
const isMetaMaskInstalled = ref(false)
const router = useRouter()


// 检查MetaMask是否已安装
onMounted(async () => {
  checkIfMetaMaskIsInstalled()
})
// 监听 isConnected 变化，自动跳转
watch(() => walletStore.isConnected, async (newVal) => {
  console.log("🎯 监听到 isConnected 变化:", newVal);
  if (newVal) {
    await nextTick();  // 确保状态更新完成
    router.push('/').catch(err => console.error("跳转失败:", err)); // ✅ 连接成功后跳转
  }
});  
// 检查MetaMask是否已安装
 
const checkIfMetaMaskIsInstalled = () => {
  isMetaMaskInstalled.value = typeof window.ethereum !== 'undefined' && window.ethereum.isMetaMask
}
  
</script>
  
  